<div class="todolist-operates-container">
  <div class="operates-unfold">
    <ul>
      <li class="box-top">开✨</li>
      <li
        [class.active]="isActiveFilter('all')"
        (click)="filterTodos('all')">全部</li>
      <li
        [class.active]="isActiveFilter('active')"
        (click)="filterTodos('active')">进行中</li>
      <li
        [class.active]="isActiveFilter('completed')"
        (click)="filterTodos('completed')">已完成</li>
      <li>
        <button nz-button nzType="dashed" [nzBlock]="true" (click)="deleteFinishedConfirm()">清除已完成</button>
      </li>
      <li>
        <button nz-button nzType="dashed" [nzBlock]="true" (click)="deleteAllConfirm()">清除全部</button>
      </li>
      <li class="login-out" (click)="performOperation('logout')">退出登录</li>
    </ul>
  </div>
</div>
